<template>
	<ul class="a-list">
		<li class="a-item"
    v-for="item of letters"
    :key="item"
    :ref="item"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @click="handleLeterClick">{{item}}</li>
	</ul>
</template>

<script>
	export default{
			name : 'CityAlphabet',
      props:  {
        cities: Object

      },
      computed: {
        letters() {
          //循环出数组，不用cities循环，改letters
          const letters = []
          for (let i in this.cities){
            letters.push(i)
          }
          return letters
        }
      },
      data()  {
        return  {
          touchStatus: false
        }
      },
      methods:  {
        handleLeterClick(e){
          //传值给city
          this.$emit('change',e.target.innerText)
         // console.log(e.target.innerText)
        },
        handleTouchStart()  {
          this.touchStatus = true
        },
        handleTouchMove(e) {
          if(this.touchStatus)  {
            const startY = this.$refs['A'][0].offsetTop
            const touchY = e.touches[0].clientY -74
            const index = Math.floor((touchY - startY) /20)
            if(index >=0 && index < this.letters.length){
               this.$emit('change',this.letters[index])
            }

             //console.log(index)
          }
        },
        handleTouchEnd()  {

        }
      }
	}
</script>

<style lang="stylus">
	@import '~styles/varibles.styl'
	.a-list
		display: flex
		flex-direction: column
		justify-content: center
		position: absolute
		top: 1.58rem
		right: 0
		bottom: 0
		width: .4rem
		.a-item
			line-height: .4rem
			text-align: center
			color: $bgColor
</style>
